<template>
	<view>
		<!-- 地区融资 -->

		<view class="header">
			<u-dropdown menu-icon="arrow-down-fill" menu-icon-size="12" title-size="24" active-color="#3458A2"
				@open="open" @close="close" :border-bottom="true">
				<u-dropdown-item v-for="(c,i) in list" :key="i" :title="c.time">

					<view class="slot-content" style="background-color: #FFFFFF;" v-if="i==0">
						<view class="arrow-down-fill-tows">
							<view class="startTime">
								<view>
									<view style="color: #999999;font-size: 18upx;">
										<view v-if="startTime.text.fel">
											{{startTime.text.te}}
										</view>
										<view v-if="!startTime.text.fel">
											{{startTime.nian+startTime.yue+startTime.ri}}
										</view>

									</view>
									<view>
										<u-icon name="arrow-down" color="#C0C4CC" size="28"></u-icon>
									</view>

								</view>

								<view>
									<view>
										<view v-for="(item,index) in topList.nian" :key="index"
											@click="nianClick(index)" :class="{'class-BGC':item.fel==true}">
											{{item.text}}

										</view>

									</view>
									<view>
										<view v-for="(item,index) in topList.yue" :class="{'class-BGC':item.fel==true}"
											:key="index" @click="yueClick(index)">
											{{item.text}}

										</view>

									</view>
									<view>
										<view v-for="(item,index) in topList.ri" :class="{'class-BGC':item.fel==true}"
											:key="index" @click="riClick(index)">
											{{item.text}}

										</view>

									</view>

								</view>

							</view>
							<view class="endTime">

								<view>
									<view style="color: #999999;font-size: 18upx;">


										<view v-if="endTime.text.fel">
											{{endTime.text.te}}
										</view>
										<view v-if="!endTime.text.fel">
											{{endTime.nian+endTime.yue+endTime.ri}}
										</view>

									</view>
									<view>
										<u-icon name="arrow-down" color="#C0C4CC" size="28"></u-icon>
									</view>

								</view>

								<view>
									<view>
										<view v-for="(item,index) in topLists.nian" :key="index"
											@click="niansClick(index)" :class="{'class-BGC':item.fel==true}">
											{{item.text}}

										</view>

									</view>
									<view>
										<view v-for="(item,index) in topLists.yue" :key="index"
											@click="yuesClick(index)" :class="{'class-BGC':item.fel==true}">
											{{item.text}}

										</view>

									</view>
									<view>
										<view v-for="(item,index) in topLists.ri" :key="index" @click="risClick(index)"
											:class="{'class-BGC':item.fel==true}"> {{item.text}}

										</view>

									</view>

								</view>
							</view>
						</view>
					</view>

				</u-dropdown-item>
			</u-dropdown>
		</view>



		<view class="center-list">
			<view>
				时点贷款余额
			</view>
			<view>
				1008.4亿元
			</view>
			<view>
				（四大行贷款余额合计：395.4亿）
			</view>


		</view>



		<view class="footer-list">
			<view class="footer-list-s" v-for="(c,i) in keylist" :key="i">
				<view class="footer-list-s-header" @click="GroupOClick(i)">
					<view>
						<image src="../index/imgs/financing/zuo1.png" mode=""></image>
					</view>
					<view>
						{{c.title}}
					</view>
					<view>
						<image src="../index/imgs/financing/you1.png" mode=""></image>
					</view>
				</view>
				<view class="footer-list-s-center">
					<view :class="c.class">

						<qiun-data-charts :type="c.ss" :chartData="c.chartData" :errorShow="false" :echartsApp="true"
							:inScrollView="true" :disableScroll="true" background="none" :opts="c.list" />
						<!-- chartDatas -->
						<!-- listsd -->

					</view>
				</view>
			</view>
		</view>



		<view class="footer-footer">

			<view class="footer-footer-header">
				<view>明细表</view>
				<view>（单位：亿元）</view>

				<view>
					<i class="el-icon-crop"></i>
				</view>

			</view>

			<view class="footer-footer-header-bottom">

				<view>
					<view v-for="(c,i) in footerList" :key="i">
						{{c}}
					</view>
				</view>


				<view>
					<view v-for="(c,i) in footerListd" :key="i" @click="optionList(i)">
						<view>
							{{c.dq}}
						</view>
						<view>
							<u-icon name="arrow-down-fill" color="#ccc" size="5"></u-icon>
						</view>

					</view>
				</view>

			</view>


			<view class="option-list">

				<view v-for="(c,i ) in footerListd" :key="i">

					<view v-for="(item,index ) in c.optionListsd1" v-show="c.fel" :key="index"
						@click="optionClick1(index,i)">
						{{item.text}}
					</view>

				</view>




			</view>





		</view>




		<view class="footeraaaaaaaaaaa">
			<el-table :data="tableData" :cell-style="cellStyle" :header-cell-style="tableHeaderColor">
				<el-table-column prop="AREA_ORG_NAME" label="地区" width="50">
				</el-table-column>
				<el-table-column prop="BANK" label="银行" width="120">
				</el-table-column>
				<el-table-column width="100" prop="TOTAL_VALUE" label="-">
				</el-table-column>
				<el-table-column width="120" prop="FK_BALANCE_VALUE" label="-">
				</el-table-column>
				<el-table-column width="100" prop="AJ_BALANCE_VALUE" label="-">
				</el-table-column>
				<el-table-column width="90" prop="percent" label="贷款余额">
				</el-table-column>
			</el-table>

		</view>






	</view>


</template>

<script>
	import uCharts from '../index/index.js'
	import echarts from './echarts/index.js'

	export default {
		data() {
			return {
				list: [{
						time: "起止时间",
						fel: false,
						options: []
					},
					{
						time: "存款余额口径",
						fel: false,
						options: []
					},
					{
						time: "贷款余额口径",
						fel: false,
						options: []
					},
					{
						time: "地区",
						fel: false,
						options: []
					}

				],
				startTime: {
					text: {
						te: '开始时间',
						fel: true
					},
					nian: '',
					yue: '',
					ri: '',
				},
				endTime: {
					text: {
						te: '结束时间',
						fel: true
					},
					nian: '',
					yue: '',
					ri: '',
				},
				topList: {
					nian: [{
							text: '2017年',
							fel: false
						},
						{
							text: '2018年',
							fel: false
						},
						{
							text: '2019年',
							fel: false
						},
						{
							text: '2020年',
							fel: false
						},
						{
							text: '2021年',
							fel: false
						}
					],
					yue: [{
							text: '1月',
							fel: false
						},
						{
							text: '2月',
							fel: false
						},
						{
							text: '3月',
							fel: false
						},
						{
							text: '4月',
							fel: false
						},
						{
							text: '5月',
							fel: false
						},
						{
							text: '6月',
							fel: false
						},
						{
							text: '7月',
							fel: false
						},
						{
							text: '8月',
							fel: false
						},
						{
							text: '9月',
							fel: false
						},
						{
							text: '10月',
							fel: false
						},
						{
							text: '11月',
							fel: false
						},
						{
							text: '12月',
							fel: false
						}

					],
					ri: []
				},
				topLists: {
					nian: [{
							text: '2017年',
							fel: false
						},
						{
							text: '2018年',
							fel: false
						},
						{
							text: '2019年',
							fel: false
						},
						{
							text: '2020年',
							fel: false
						},
						{
							text: '2021年',
							fel: false
						}
					],
					yue: [{
							text: '1月',
							fel: false
						},
						{
							text: '2月',
							fel: false
						},
						{
							text: '3月',
							fel: false
						},
						{
							text: '4月',
							fel: false
						},
						{
							text: '5月',
							fel: false
						},
						{
							text: '6月',
							fel: false
						},
						{
							text: '7月',
							fel: false
						},
						{
							text: '8月',
							fel: false
						},
						{
							text: '9月',
							fel: false
						},
						{
							text: '10月',
							fel: false
						},
						{
							text: '11月',
							fel: false
						},
						{
							text: '12月',
							fel: false
						}

					],
					ri: []
				},
				FromStartToEndTime: [],
				uCharts: uCharts,
				echarts: echarts,
				keylist: [{
						title: '地区融资有息负债走势',
						list: echarts.mixn,
						chartData: echarts.mixnlIst,
						ss: 'mix',
						class: 'charts-box'
					},
					{
						title: '地区融资银行分布',
						list: uCharts.listsd,
						chartData: uCharts.chartDatas,
						ss: 'ring',
						class: 'charts-box'
					},
					{
						title: '地区融资类型分布',
						list: uCharts.listsd,
						chartData: uCharts.chartDatas,
						ss: 'ring',
						class: 'charts-box'
					},
					{
						title: '地区融资银行存款余额及存贷比',
						list: echarts.s20216212,
						chartData: echarts.S2021621,
						ss: 'mix',
						class: 'charts-box'
					},
					{
						title: '地区融资存贷比趋势',
						list: echarts.s20216212,
						chartData: echarts.S2021622S,
						ss: 'mix',
						class: 'charts-box'
					}

				],
				footerList: [
					'贷款余额参数1', '贷款余额参数2', '项目分期', '口径', '贷款类型'
				],
				footerListd: [{
						dq: '地区',
						optionListsd1: [{
								text: '显示',
								fel: false
							},
							{
								text: '不显示',
								fel: false
							},
						],
						fel: false
					},
					{
						dq: '银行',
						optionListsd1: [{
								text: '显示',
								fel: false
							},
							{
								text: '不显示',
								fel: false
							},
						],
						fel: false
					},
					{
						dq: '不显示',
						optionListsd1: [{
								text: '显示',
								fel: false
							},
							{
								text: '不显示',
								fel: false
							},
						],
						fel: false
					},
					{
						dq: '不显示',
						optionListsd1: [{
								text: '显示',
								fel: false
							},
							{
								text: '不显示',
								fel: false
							},
						],
						fel: false
					},
					{
						dq: '不显示',
						optionListsd1: [{
								text: '显示',
								fel: false
							},
							{
								text: '不显示',
								fel: false
							},
						],
						fel: false
					}
				],
				optionList1: false,
				optionList2: false,
				optionList3: false,
				index: '',
				tableData: []

			};
		},
		mounted() {
			this.set()
			console.log(echarts.disitu.data.mapecharts)
			let li = []
			let value = []
			echarts.disitu.data.mapecharts.forEach(res => {

				li.push(res.bank)
				value.push(res.value)

			})

			// 柱状图数据
			echarts.S2021621.series[0].data = value
			// 柱状图数据
			// 柱状图底部信息
			echarts.S2021621.categories = li
			// 柱状图底部信息
			// echarts.disitu.data.listmap.DKYETOTAL


			console.log(echarts.disitu.data)
		},
		methods: {

			GroupOClick(i) {

				if (i == 0) {
					uni.navigateTo({
						url: "GroupO1/GroupO1"
					})
				}
				if (i == 1 || i == 2) {
					uni.navigateTo({
						url: "GroupO2/GroupO2"
					})
				}
				if (i == 3) {
					uni.navigateTo({
						url: "GroupO3/GroupO3"
					})
				}
				if (i == 4) {
					uni.navigateTo({
						url: "GroupO4/GroupO4"
					})
				}




			},
			cellStyle(row, column, rowIndex, columnIndex) {
				return 'background:#F7F7F7'
			},
			tableHeaderColor(row) {
				return 'background:#F7F7F7'
			},
			optionClick1(index, i) {
				console.log(index, i)

			},
			optionList(i) {
				if (typeof(this.index) != 'number') {
					this.index = i
					this.footerListd.forEach(res => {
						res.fel = false
					})
					this.footerListd[i].fel = !this.footerListd[i].fel
				} else {
					this.footerListd.forEach(res => {
						res.fel = false
					})
					this.index = ''
				}



			},
			open(i) {
				console.log(i)
			},
			close(i) {

				this.FromStartToEndTime = []

				let State =
					`${this.startTime.nian.split('年')[0]}-${this.startTime.yue.split('月')[0]}-${this.startTime.ri.split('日')[0]}`
				let End =
					`${this.endTime.nian.split('年')[0]}-${this.endTime.yue.split('月')[0]}-${this.endTime.ri.split('日')[0]}`
				this.FromStartToEndTime.push(State)
				this.FromStartToEndTime.push(End)
				console.log(this.FromStartToEndTime)



			},
			set() {
				let sdas = (new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)).getDate()

				let ls = []
				for (let index = 0; index < sdas; index++) {
					ls.push({
						fel: false,
						text: (index + 1) + '日'
					})
				}
				this.topList.ri = ls
				this.topLists.ri = ls
			},
			get(nian, yue, num) {
				if (num == 1) {
					let timeo = (new Date(nian.split('年')[0], yue.split('月')[0], 0)).getDate()
					let lss = []
					for (let index = 0; index < timeo; index++) {
						lss.push({
							fel: false,
							text: (index + 1) + '日'
						})
					}
					this.topList.ri = lss
				} else {
					let timeo = (new Date(nian.split('年')[0], yue.split('月')[0], 0)).getDate()
					let lss = []
					for (let index = 0; index < timeo; index++) {
						lss.push({
							fel: false,
							text: (index + 1) + '日'
						})
					}
					this.topLists.ri = lss
				}

			},
			nianClick(i) {
				this.topList.nian.forEach(res => {
					res.fel = false
				})
				this.topList.nian[i].fel = true
				this.startTime.text.fel = false
				this.startTime.nian = this.topList.nian[i].text
			},
			yueClick(i) {
				this.topList.yue.forEach(res => {
					res.fel = false
				})
				this.topList.yue[i].fel = true

				this.startTime.text.fel = false
				this.startTime.yue = this.topList.yue[i].text
				this.startTime.ri = ''
				this.get(this.startTime.nian, this.startTime.yue, 1)

			},
			riClick(i) {
				this.topList.ri.forEach(res => {
					res.fel = false
				})
				this.topList.ri[i].fel = true
				this.startTime.text.fel = false
				this.startTime.ri = this.topList.ri[i].text
			},
			niansClick(i) {
				this.topLists.nian.forEach(res => {
					res.fel = false
				})
				this.topLists.nian[i].fel = true
				this.endTime.text.fel = false
				this.endTime.nian = this.topLists.nian[i].text
			},
			yuesClick(i) {
				this.topLists.yue.forEach(res => {
					res.fel = false
				})
				this.topLists.yue[i].fel = true

				this.endTime.text.fel = false
				this.endTime.yue = this.topLists.yue[i].text
				this.endTime.ri = ''
				this.get(this.endTime.nian, this.endTime.yue, 2)

			},
			risClick(i) {
				this.topLists.ri.forEach(res => {
					res.fel = false
				})
				this.topLists.ri[i].fel = true
				this.endTime.text.fel = false
				this.endTime.ri = this.topLists.ri[i].text
			}
		}
	}
</script>



<style scoped src="../css/css1-10/sanAllcss/sanAllcss.min.css">
</style>
<style scoped src="../css/css1-10/beginningTime/beginningTime.min.css">
</style>
<style lang="scss" scoped>


	.footer-footer {

		.footer-footer-header-bottom {
			width: 100vw;
			color: #003894;
			font-size: 18upx;

			>view:nth-child(1) {
				display: flex;
				align-items: center;
				margin-bottom: 17upx;
				margin-left: 30upx;

				>view {
					width: 138upx;
					display: flex;
					align-items: center;
					justify-content: start;
					white-space: nowrap;
					transform: scale(0.8);
				}

			}

			>view:nth-child(2) {
				display: flex;
				align-items: center;
				margin-left: 30upx;
				margin-bottom: 20upx;

				>view {
					width: 138upx;
					height: 40upx;
					border: 1upx solid #003894;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 5upx;

					view:nth-child(2) {
						transform: scale(0.5);

					}

				}
			}

		}

		.option-list {
			width: 100vw;
			display: flex;
			margin-left: 30upx;
			margin-top: -20upx;
			position: absolute;
			z-index: 9999999999999999999;
			top: 190upx;

			>view {
				width: 138upx;
				height: 47upx;

				>view {
					background: #FFFFFF;
					box-shadow: 0px 0px 9upx 1upx #9FA0A0;
					opacity: 1;
					width: 100%;
					height: 47upx;
					border-bottom: 1upx solid #E8E8E8;
					display: flex;
					align-items: center;
					justify-content: center;
				}

			}
		}


	}

	.wire {
		width: 750px;
		height: 2px;
		background: #EEEEEE;
	}

	.class-BGC {
		background-color: #06AFB2;
		color: #fff;
	}

	.center-list {
		width: 690upx;
		height: 117upx;
		background: #F8F8F8;
		box-shadow: 0upx 3upx 9upx 0upx rgba(70, 65, 65, 0.35);
		border-radius: 10upx;
		margin-top: 46upx;
		margin-left: 30upx;

		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 22upx;

		view:nth-child(1) {

			font-size: 30upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #333333;
			white-space: nowrap;
		}

		view:nth-child(2) {

			font-size: 37upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #F4B544;
			white-space: nowrap;
			margin-left: 10upx;
		}

		view:nth-child(3) {
			font-size: 18upx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #666666;
			white-space: nowrap;
			transform: scale(0.8);
			margin-left: -40upx;
		}

	}

	.footer-list-s {
		.footer-list-s-center {
			width: 100vw;
			height: 478upx;
			border-bottom: 4upx solid #EEEEEE;

			.charts-box {
				width: 100%;
				height: 100%;
				padding: 30upx;
				// background-color: red;

			}
		}
	}



</style>
